<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue快速上手</title>
    <!--    引入开发版,引入之后多了个vue全局构造函数-->
    <script src="../../js/vue.js"></script>
</head>
<body>
<!--
root容器里的代码我们称为vue模板
解析流程：先有容器，然后有vue实例，vue实例开始工作的时候，发现了配置，再将配置中指定的容器拿过来进行解析
扫描容器中是否有自己设计的特殊语法，扫描到了之后对其进行操作，然后生成全新的容器，在将解析玩的容器重新放到页面上
-->
<h1 id="root">Hello {{name}} {{time}}</h1>
<script>
    new Vue({
        el: '#root', //el用于指定当前vue对象为哪个容器服务，值通常为css选择器字符串
        data: {  //data用于存储数据，数据提供el所指定的模板去使用，值我们暂时先写成一个对象
            name: 'vue',
            time: Date.now()
            //如果在配置里边没有出现的字段，在容器中被使用，会出现报错，也就是说在双括号里只能出现js表达式
        }

    })
    /**
     * 一个实例对应多个容器时，只对第一个容器进行解析
     * 多个实例对应一个容器时，一个容器只能被第一个vue实例接管，后面的容器虽然执行了但是不生效
     * 也就是说容器与实例是一一对应的关系
     */


</script>
</body>
</html>